<template>
  <div>
    <!-- data：指定渲染的数据源
    default-expand-all 是否默认展开所有节点，true表示展开
    label：指定渲染页面的内容属性
    children：指定子节点渲染的数据 -->

    <!-- props:{label:值}
    可以通过通过props中的label属性来修改渲染页面内容的属性名 -->
    <el-tree :data="treeData" default-expand-all :props="{ label:'name' }" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '总裁办',
          children: [
            {
              name: '总裁'
            }
          ]
        }, {
          name: '技术部',
          children: [
            {
              name: '总裁'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
$height-light-color:red;
h1{
    color: $height-light-color;
}
</style>
